<template>
	<view class="">
		<!-- <button open-type="getPhoneNumber" @getphonenumber='getphonenumber'>登录</button> -->
		<view class="main">
			<view class="main-l">
				<view class="main-l-img">
					<image :src="userInfo.logo" v-if='isStatus' mode=""></image>
					<image src="../../static/logo.png" v-else mode=""></image>
				</view>
				<view class="main-l-login" v-if='isStatus'>{{userInfo.nickName}}</view>
				<view class="main-l-login" v-else @click="login">登录</view>
			</view>
			<view class="main-r">
				<view class="">
					账号设置
				</view>
			</view>
		</view>
		<!-- <view @click="login">
			登录
		</view> -->
	</view>
</template>

<script>
import {loginByWechat} from '@/api/login.js'
import { mapState } from 'vuex'//引入mapState
export default{
	computed: {
		//使用对象展开运算符将此对象混入到外部对象中
		...mapState({
			userInfo: state => state.user.userInfo,
			isStatus: state => state.user.isStatus,
		})
	},
	methods:{
		async loginByWechat(code){
			if(code){
				let res = await loginByWechat({
					js_code:code
				})
				if(res.code == 0){
					this.$store.dispatch('userLogin',res.data)
				}
				uni.hideLoading()
				
				console.log(res,'res')
			}else{
				uni.hideLoading()
				console.log('请传入uni.login的code')
			}
			
		},
		async login(){
			// #ifdef MP-WEIXIN
				uni.showLoading({
					title:'登陆中...'
				})
				let {code,errMsg} = await uni.login({
						provider:'weixin',
						onlyAuthorize:true
				})
				console.log(code,errMsg)
				if(errMsg == 'login:ok'){
					this.loginByWechat(code)
				}
			// #endif
				
				
			// #ifndef MP-WEIXIN
				uni.navigateTo({
					url: '/pagePackage/login/index',
				})
				console.log(2)
			//#endif
			},
			getphonenumber(e){
				console.log(e)
			}
		
		
		
	}
}
</script>

<style scoped>
.main{
	width: 100vw;
	padding: 0 40rpx;
	box-sizing: border-box;
	/* margin-top: 150rpx; */
	/* height: 100vh; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: url('http://localhost:8080/static/images/bg.png') no-repeat;
	background-size: 100% 100%;
	/* flex-direction: column; */
}
.main-l{
	width: 500rpx;
	height: 500rpx;
	display: flex;
	align-items: center;
}
.main-l-img{
	width: 100rpx;
	height: 100rpx;
}
.main-l image{
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
}
.main-l-login{
	margin-left: 40rpx;
}
</style>